<!--
 * @Author: 徐伟杰
 * @Date: 2022-09-02 17:49:55
 * @LastEditors: 徐伟杰
 * @LastEditTime: 2022-11-04 15:11:45
 * @Description: 
 * @Email: 1529315455@qq.com
 * @Company: 3xData
 * @youWant: add you want
-->
<template>
  <view>
    <action-bar :options="navOptions"></action-bar>
    <view class="register_box">
      <header-step :curStep="step.curStep" @stepClick="stepClick($event)" :title="step.title" />

      <view class="register_box-form">
        <FirstStep v-if="categoryCode == 0" @changeNext="changeNext"></FirstStep>
        <StepTwo v-else-if="categoryCode == 1" @changeNext="changeNext"></StepTwo>
        <StepThree v-else-if="categoryCode == 2" @changeNext="changeNext"></StepThree>
      </view>
    </view>
  </view>
</template>

<script>
import headerStep from '../../pages/login/components/headerStep.vue'
import FirstStep from './components/FirstStep.vue'
import StepTwo from './components/StepTwo.vue'
import StepThree from './components/StepThree.vue'
export default {
  components: {
    headerStep,
    FirstStep,
    StepTwo,
    StepThree
  },
  data() {
    return {
      categoryCode: 0,
      navOptions: {
        statusBar: 'dark',
        left: {
          icon: 'back'
        },
        center: {
          title: '项目登记'
        }
      },
      // options: [{
      //   title: '第一步'
      // }, {
      //   title: '第二步'
      // }, {
      //   title: '第三步'
      // }],
      step: {
        title: ['基本信息', '服务对象', '合同附件'],
        curStep: 0,
      },
      projectId: ''
    }
  },
  onLoad(e) {
    if (Object.values(e).length != 0) {
      this.projectId = e.id
    }
  },
  methods: {
    changeNext(e) {
      this.categoryCode = e
      this.$set(this.step, 'curStep', e)
    },
    stepClick(step) {
      this.$set(this.step, 'curStep', step)
      this.categoryCode = step
    }
  }
}
</script>

<style lang="less" scoped>
.register_box {
  min-height: calc(100vh - 80rpx);
  background: #f4f5f5;

  &-steps {
    width: 100%;
    padding: 30rpx;
    height: 165rpx;
    background: #ffffff;
    border-radius: 0rpx 0rpx 20rpx 20rpx;
  }

  &-form {
    width: 100%;
    border-radius: 20rpx 20rpx 0rpx 0rpx;
  }
}

/deep/.uni-stat__select {
  padding: 0;
}

::v-deep .input-placeholder {
  color: #999;
  font-size: 26rpx;
}

::v-deep .uni-section {
  background-color: transparent !important;
  margin-top: 0 !important
}
</style>
